<template>
 <div class="goodsinfo-cantainer">
  <div class="mui-card">
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content" >
					<div class="mui-card-content-inner" >
						 <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
                        
					</div>
				</div>
			</div>
            <div class="mui-card" >
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价
                            <span style="margin"><del>{{goodsinfo.market_price}}</del></span> 
                            销售价                          
                            <span style="font-size:16px; color:red">{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>购买数量 <nobox :max="goodsinfo.stock_quantity"></nobox></p>
                        <div>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small">加入购物车</mt-button>
                        </div>
					</div>
				</div>
			

			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{goodsinfo.goods_no}}</p>
                        <p>库存情况:{{goodsinfo.stock_quantity}}</p>
                        <p>上架时间:{{goodsinfo.add_time | dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer btnarea">
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                    <mt-button type="danger" size="large">商品评论</mt-button>
                
                </div>
			</div>

            
            	
		 </div>
        </div>
    </div>

</div>

</template>

<script>
import swiper from '../sub-conponents/Swipe.vue'
import nobox from '../sub-conponents/goodsinfo_nobox.vue'

export default {
    data(){
        return{ 
            lunbotu:[],
            goodsinfo:{},
        };
    },
    created(){
        this.getlunbotu();
        this.getGoodsInfo();
    },

    methods:{
        async getlunbotu(){
            const{data} = await this.$http.get('api/getthumimages/'+this.id);
            if(data.status === 0) return (this.lunbotu = data.message);

        },
        async getGoodsInfo(){
            const{data} = await this.$http.get('api/goods/getinfo/'+this.id);
            if(data.status === 0) return (this.goodsinfo = data.message[0])
        }

    },
    props:['id'],
    components:{
        swiper,
        nobox,

    },

};
</script>

<style lang="scss" scoped>
    .goodsinfo-cantainer{
        box-shadow: #cccccc;
        background-color: #eee;
        overflow: hidden;
    }

    .btnarea{
        flex-direction: column;
        button + button{
            margin-top:5px;
        }
        
    }
</style>>